<template>
    <Modal  :width="1100"  v-model='modal' class="modalstyle" :mask-closable='false'  title="站点配置" @on-cancel='canceledit(modalname)' footer-hide draggable>
      <div class="row" id="tabemplyee">
        <div class="col-md-2 e_tab">
          <ul class="e_navbar">
            <li class="e_navbar_item" v-for="(tab,index) in tabs " :key="index" :class="{'active':index===selected}" @click="changetabs(index)"  v-hasC="tab.show">
              {{tab.tabname}}
            </li>
          </ul>
        </div>
         <div class="col-md-8 e-tab-bd">
          <location ref="location" :modalparams="modalparams" :selected="selected" ></location>
      </div>
      </div>
    </Modal>
 
</template>
<script>
    import { siteindexinfo, sslInfo, configInfo } from '@api/httpsetting'
    import location from './components/index.vue';
    import util from '@/libs/util';
    export default {
        name: '',
        components: {
            location
        },

        data () {
            return {
                modalname: 'modalname',
                modal: false,
                subloading: false,
                ztdir: false,
                zt_dir_list: [],
                domainlist: [],
                ssl_key: '',
                ssl_pem: '',
                ssl_time: '',
                ssl_edit: false,
                modalparams: {
                    id: '',
                    domain: '',
                    // https证书绑定
                    ssl_key_data: '',
                    ssl_pem_data: '',
                    certificate: '',
                    brand: '',
                    ssl_end_date: '',
                    // 绑定301
                    redirect_301: '',
                    // 遮罩配置
                    zz_url: '',
                    // 优化配置
                    yh_fast_token: '',
                    yh_general_token: '',
                    // 绑定专题
                    zt_dir: '',
                    zt_other_domain: '',
                    zt_other_dir: '',
                    // 首页跳转配置
                    site_type: '', // 当前站点类型
                    location_type: '',
                    location_url: '',
                    redirect_301_to_site:''
                },
                tabs: [
                    { tabname: '绑定https', show: { name: '-v1-site-index-bind-ssl', flag: '/v1/site/index/bind-ssl' } },
                    { tabname: '绑定专题', show: { name: '-v1-site-index-bind-zt', flag: '/v1/site/index/bind-zt' } },
                    { tabname: '绑定二级栏目', show: { name: '-v1-site-index-bind-zt2', flag: '/v1/site/index/bind-zt' } },
                    { tabname: '301配置', show: { name: '-v1-site-index-bind-redirect', flag: '/v1/site/index/bind-redirect' } },
                    { tabname: '遮罩配置', show: { name: '-v1-site-index-set-zz', flag: '/v1/site/index/set-zz' } },
                    { tabname: '首页跳转配置', show: { name: '-v1-site-index-set-index-location', flag: '/v1/site/index/set-index-location' } },
                    { tabname: '收录配置', show: { name: '-v1-site-index-set-yh', flag: '/v1/site/index/set-yh' } },
                    { tabname: '配置文件', show: { name: '-v1-site-index-update-nginx-config', flag: '/v1/site/index/update-nginx-config' } }

                ],
                selected: undefined,
                currentView: '0'
            };
        },
        mounted () {

        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                this.ztdir = false
                this.modalparams = {
                    id: row.id,
                    domain: '',
                    // https证书绑定
                    ssl_key_data: '',
                    ssl_pem_data: '',
                    brand: '',
                    ssl_end_date: '',
                    certificate: '', // 证书品牌
                    // 绑定301
                    redirect_301: '',
                    // 遮罩配置
                    zz_url: '',
                    // 优化配置
                    yh_fast_token: '',
                    yh_general_token: '',
                    // 绑定专题
                    zt_dir: '',
                    zt_other_domain: '',
                    zt_other_dir: '',
                    zt_dir_list: [],
                    // 首页跳转配置
                    site_type: row.site_type, // 当前站点类型
                    location_type: '',
                    location_url: '',
                    redirect_301_to_site:'',
                }
                this.askData(row)
                this.getHttps(row)
                // this.getNginx(row)
                this.currentView = '0'
                this.getSelect()
            },
            getSelect () {
                let menus = util.storage.get('menus');
                let power = menus.action;
                for (let index in this.tabs) {
                    for (let item of power) {
                        if (item.flag === this.tabs[index].show.flag && item.marking === this.tabs[index].show.name) {
                            this.selected = index * 1
                            return
                        }
                    }
                }
            },
            // 获取https信息
            getHttps (row) {
                sslInfo({ id: row.id }).then(res => {
                    this.modalparams.certificate = res.domain
                    this.modalparams.brand = res.brand
                    this.modalparams.ssl_end_date = res.ssl_end_date
                })
            },
            // 获取配置文件
            getNginx (row) {
                // let type = this.name == 'name1' ? 'nginx_conf' : this.name == 'name2' ? 'ssl_conf证书' : this.name == 'name3' ? 'zz_conf遮罩' : ''
                configInfo({ id: row.id, type: 'nginx_conf' }).then((res) => {
                    this.editorTitle = res.conf_data
                })
            },
            askData (row) {
                siteindexinfo({ id: row.id }).then(res => {
                    this.domainlist = res.condition.db_list
                    this.modalparams.zt_dir_list = res.condition.zt_dir_list
                    this.modalparams.domain = res.domain
                    // https证书绑定
                    this.modalparams.ssl_key_data = res.ssl_key_data
                    this.modalparams.ssl_pem_data = res.ssl_pem_data
                    this.ssl_key = res.ssl_key
                    this.ssl_pem = res.ssl_pem
                    this.ssl_time = res.ssl_time
                    this.ssl_edit = !!res.ssl_time
                    // 绑定301
                    this.modalparams.redirect_301 = res.redirect_301
                    //301到当前域名
                    this.modalparams.redirect_301_to_site=res.redirect_301_to_site.length>0?res.redirect_301_to_site.join('\n'):''
                    // console.log(typeof( this.modalparams.redirect_301_to_site),'redirect_301_to_site')
                    // 遮罩配置
                    this.modalparams.zz_url = res.zz_url
                    // 优化配置
                    this.modalparams.yh_fast_token = res.yh_fast_token
                    this.modalparams.yh_general_token = res.yh_general_token
                    // 绑定专题
                    this.modalparams.zt_dir = res.zt_dir
                    this.modalparams.zt_other_domain = res.zt_other_domain
                    this.modalparams.zt_other_dir = res.zt_other_dir
                    // 首页跳转配置
                    this.modalparams.location_type = res.location_type
                    this.modalparams.location_url = res.location_url

                    this.modal = true
                })
            }, // 请求数据处理
            canceledit () {
                this.modal = false
                this.$emit('askData')
            },
            handleUploadkey (file) {
                this.modalparams.ssl_key = file;
                return false;
            },
            handleUploadpem (file) {
                this.modalparams.ssl_pem = file;
                return false;
            },
            changetabs (index) {
                this.selected = index
                if (index === 7) {
                    this.$nextTick(() => {
                        this.$refs.location.getNginx();
                    });
                }
            }
        }
    }
</script>
<style lang="less" scoped>
.setmodal{
  .ivu-form-item{
      margin-bottom: 16px
  }
}
#tabemplyee{
width:100%;
height: auto;
display: flex;
justify-content: flex-start;

}

.e_tab{
width: 20%;height: 100%;line-height: 50px;padding: 0;

}

// .e_tab ul li a{text-decoration: none;color: #fff;}

.e_tab_bd{ margin: 3%;}
.col-md-8{flex: 1;padding: 0 20px;}

/*切换动画*/

.fade-transition {
transition: opacity 0.3s ease;

}

.fade-enter,

.fade-leave {
opacity: 0;

}

.fa{
width: 0;

height: 0;

border-top: 25px solid transparent;

border-right: 25px solid #fff;

border-bottom: 25px solid transparent;

}

.fa2{
display:block;

border-color: transparent #fff transparent transparent;

border-style: dashed solid dashed dashed;

border-width: 25px;

}
</style>
<style>
.modalstyle .ivu-modal-body{
    padding: 0 ;
}
</style>
